<template>
  <div class="rotary" v-if="show">
    <div class="content">
      <Icon type="ios-close-circle-outline" class="close-icon" @click="closeMet" />
      <div class="card-sty">
        <img src="@/assets/images/activity/decoration.png" class="decoration-head" alt="">
        <div class="head-title">
          <img src="@/assets/images/activity/decoration_right.png" class="title-img" alt="">
          <span>{{ $t(explainI18n[explainType].title) }}</span>
          <img src="@/assets/images/activity/decoration_left.png" class="title-img" alt="">
        </div>
        <div class="prize-content" v-if="explainType == 0">{{ winGoods.replace('\\n', '') }}!</div>
        <div :class="explainType == 0 ? 'tip-text' : 'other-text'">{{ $t(explainI18n[explainType].sub) }}</div>
        <div class="card-handle" v-if="explainType == 0">
          <div class="again-btn" @click="againBtn">{{ $t('christmas.tryAgain') }}</div>
          <div class="more-btn" @click="moreMet">{{ $t('christmas.moreChances') }}</div>
        </div>
        <div class="other-handle" v-if="explainType != 0">
          <div class="discord-btn" @click="joinDiscord">
            <img src="@/assets/images/user/discord.png" class="img" alt="">
            <span class="text">{{ $t('christmas.joinNow') }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { jumpDiscord, copyInviteLink } from "@/common/common";
export default {
  data() {
    return {
      show: false,
      //0中奖 1活动到期 2活动已暂停 3没有抽奖次数  4奖品池已空
      explainType: 0,
      winGoods: '',//抽中奖品名称
      explainI18n: [
        {
          title: 'christmas.explainTitle0',
          sub: 'christmas.explainSub0'
        },
        {
          title: 'christmas.explainTitle1',
          sub: 'christmas.explainSub1'
        },
        {
          title: 'christmas.explainTitle2',
          sub: 'christmas.explainSub2'
        },
        {
          title: 'christmas.explainTitle3',
          sub: 'christmas.explainSub3'
        },
        {
          title: 'christmas.explainTitle4',
          sub: 'christmas.explainSub4'
        },
      ]
    }
  },
  methods: {
    open(e) {
      this.explainType = e.type;
      if (e && e.text) {
        this.winGoods = e.text;
      }
      this.show = true;
    },
    closeMet() {
      this.show = false;
    },
    againBtn() {
      this.show = false;
      this.$emit('againEmit');
    },
    moreMet() {
      this.show = false;
      this.onCopy(copyInviteLink());
    },
    onCopy(info) {
      // 复制
      let _this = this;
      this.$copyText(info).then(function () {
        _this.$Message.success(_this.$t('public.copySuccess'));
      }, function () {
        _this.$Message.error(_this.$t('public.copyFail'));
      })
    },
    joinDiscord() {
      this.show = false;
      jumpDiscord();
    }
  }
}
</script>

<style lang="less" scoped>
.rotary {
  width: 100vw;
  height: 100vh;
  background-color: #00000080;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;

  .content {
    .close-icon {
      width: 460px;
      color: #FFFFFF;
      font-size: 32px;
      text-align: right;
      margin-bottom: 30px;
      cursor: pointer;
    }

    .card-sty {
      width: 420px;
      background: linear-gradient(179deg, #FFF0DE 0%, #FFFFFF 100%);
      border-radius: 12px 12px 12px 12px;
      padding-bottom: 32px;

      .decoration-head {
        width: 100%;
      }

      .head-title {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 24px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 24px;
        color: #1E1714;
        line-height: 28px;
        margin-top: -20px;
        text-align: center;
        padding: 0 51px;

        .title-img {
          width: 24px;
          height: 24px;
        }
      }

      .prize-content {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 30px;
        color: #1E1714;
        line-height: 35px;
        margin-top: 22px;
        margin-bottom: 24px;
        margin-left: 24px;
        margin-right: 24px;
        text-align: center;
      }

      .tip-text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 18px;
        color: #767B93;
        line-height: 21px;
        margin-bottom: 22px;
        margin-left: 24px;
        margin-right: 24px;
        text-align: center;
      }

      .other-text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 20px;
        color: #1E1714;
        line-height: 23px;
        margin-top: 24px;
        margin-left: 24px;
        margin-right: 24px;
        text-align: center;
      }

      .card-handle {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        margin-left: 24px;
        margin-right: 24px;

        .again-btn {
          width: 49%;
          height: 52px;
          background: #C3140B;
          border-radius: 7px 7px 7px 7px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 600;
          font-size: 20px;
          color: #FFFFFF;
          line-height: 52px;
          text-align: center;
          cursor: pointer;
        }

        .more-btn {
          width: 49%;
          height: 52px;
          background: #1E1714;
          border-radius: 7px 7px 7px 7px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 600;
          font-size: 20px;
          color: #FFFFFF;
          line-height: 52px;
          text-align: center;
          cursor: pointer;
        }
      }

      .other-handle {
        display: flex;
        justify-content: center;
        margin-top: 24px;

        .discord-btn {
          min-width: 224px;
          // max-width: 224px;
          padding: 0 12px;
          height: 56px;
          background: #1E1714;
          border-radius: 37px 37px 37px 37px;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          gap: 9px;
          cursor: pointer;

          .img {
            width: 24px;
            height: 24px;
          }

          .text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 600;
            font-size: 20px;
            color: #FFFFFF;
            text-wrap: nowrap;
          }
        }
      }
    }
  }
}
</style>